<template>
  <div
    class="min-h-screen flex flex-col pb-[4rem]"
  >
    <template v-if="globalLoading">
      <CommonLoading />
    </template>
    <template v-if="courseStore.courseData">
      <template v-if="!isStarted">
        <StudyPrepare @start="startStudy" />
      </template>
      <template v-else>
        <StudyTime />
        <template v-if="isAnswer()">
          <StudyAnswer />
        </template>
        <template v-if="isInput()">
          <StudyInput />
        </template>
        <StudySumup />
        <studyRatio />
        <StudyBottom />
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "no-sidebar",
});
import { globalLoading } from "~/composables/common/http";
import { useCourseStore } from "~/stores/course";
import { getContent, updateStudyTime } from "~/composables/study/api";
import { useInput, useAnswer } from "~/composables/study/studentStatus";
const isStarted = ref(false);

const startStudy = () => {
  isStarted.value = true;
};
const { isAnswer } = useAnswer();
const { isInput } = useInput();
const courseStore = useCourseStore();
const route = useRoute();
const type = route.query.type as string;
courseStore.studyType = type;
async function ladCourseData(id: string) {
  const content = await getContent(id, "words");
  courseStore.courseData = content;
  updateStudyTime(id);
}
ladCourseData(route.params.id as string);

</script>
